let articleList = [] //文章列表

fetch('http://localhost:3000')
  .then((res) => res.json())
  .then((data) => {
    console.log(data)
    articleList = data
    renderArticle(articleList)
  })

function renderArticle(list) {
  const strList = list.map(
    (item) => `
    <article class="blog-article">
      <div class="w">
        <div class="txt">
          <header class="title">${item.title}</header>
          <section class="content">${item.text}</section>
          <footer class="pubtime">2022年8月1日 16:04</footer>
        </div>
        <a href="#" class="more">阅读全文 →</a>
      </div>
    </article>
  `
  )
  console.log(strList)
  document.querySelector('#blog-main .container').innerHTML = strList.join('')
}
const menus = document.querySelectorAll('.menu')
document.querySelector('.blog-nav').addEventListener('mouseover', function (e) {
  if (e.target.className === 'nav-item-a') {
    e.target.nextElementSibling.style.display = 'block'
  }
})
document.querySelector('.blog-nav').addEventListener('mouseout', function (e) {
  if (e.target.className === 'nav-item-a') {
    e.target.nextElementSibling.style.display = 'none'
  }
})
